<template>
  <div id="signsIoSubChart">
    <vue-datepicker-local v-model="emptyTime" clearable @clear="clear" :placeholder="'请选择时间范围'" />
    <moreLineEcharts class="line"  v-if="involvementData.length"  :title="title" :opData="opData"></moreLineEcharts>
    <loading v-if="isShow && involvementData.length== 0"></loading>
    <noSearch v-if="!isShow && involvementData.length == 0"></noSearch>
  </div>
</template>
<script>
  import moreLineEcharts from '@/components/echarts/duoLineEcharts'
  import loading from '@/components/loading/loading'
  import { standardDate } from "@/components/common/date"; //引入时间转换JS
  import VueDatepickerLocal from '@/components/datepicker/VueDatepickerLocal'
  import { apiSignsIO } from '@/api/api'  //引入Io列表数据
  import noSearch from '@/components/search/noSearch' //导入没有搜索结果组件
export default {
    data() {
      return {
        opData: [],
        title: ['大便', '小便', '入量'],  
        dataTime: "0000-00-00",
        emptyTime: [],
        startDate: "",
        endDate: "",
        isShow: true,
        stoolData: [],   //大便数据
        peeData: [],    //小便
        involvementData:[]  //入量
      }
    },
    watch: {
      emptyTime: {
        handler(curVal, oldVal) {
          if (standardDate(curVal[0]) == 'NaN-NaN-NaN' || standardDate(curVal[1]) == 'NaN-NaN-NaN') {
            this.startDate = '';
            this.endDate = '';
            this.isShow = true;

          } else {
            this.isShow = true;
            this.startDate = standardDate(curVal[0]);
            this.endDate = standardDate(curVal[1]);

          }
        }
      }
    },
    created() {

      this.clear();
    },
    mounted(){
      this.getSignsIO();
      this.$nextTick(function () {
        this.getopData();
      })
    },
    methods: {
      getopData() {//设置曲线的值
        this.opData = [
          {
            name: '大便',
            type: 'line',
            symbol: 'emptycircle',    //设置折线图中表示每个坐标点的符号 emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
            data: this.stoolData
          },
          {
            name: '小便',
            type: 'line',
            symbol: 'emptycircle',    //设置折线图中表示每个坐标点的符号 emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
            data: this.peeData
          },
          {
            name: '入量',
            type: 'line',
            symbol: 'emptycircle',    //设置折线图中表示每个坐标点的符号 emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
            data: this.involvementData
          },
        ]
      },
      getSignsIO() {
        apiSignsIO({
          patientID: this.$store.getters.ID,
          dateTime: this.dataTime,
          type: "IO"
        })
          .then(res => {
            if (JSON.parse(res).Status == 1) {
              this.isShow = true;
              this.involvementData = []; this.peeData = []; this.stoolData = [];
              let data = JSON.parse(res).Data;
              for (let item in JSON.parse(res).Data) {
                for (let items of data[item]) {
                  if (items.Name == '大便') {
                    this.stoolData.push([this.filterDate(items.PER_Time), parseInt(items.Values)]);
                  } else if (items.Name == '小便') {
                    this.peeData.push([this.filterDate(items.PER_Time), parseInt(items.Values)]);
                  } else if (items.Name == '入量') {
                    this.involvementData.push([this.filterDate(items.PER_Time), parseInt(items.Values)]);
                  }
                }
              }
              //console.log(JSON.parse(res).Data)
              //console.log(this.stoolData)
              this.$nextTick(function () {
                this.getopData();
              })
              //console.log(JSON.parse(res).Data)
            } else if (JSON.parse(res).Status == -1) {
              this.isShow = false;
            }
        })
      },
      filterDate(time) {
        if (!time) {
          return '';
        }
        else {
          time = time.replace(/\//g, '-');
          return time.replace(/T/g, ' ');
        }
      },
      clear() {
        this.emptyTime = []
      }
    },
    components: {
      moreLineEcharts,
      loading,
      VueDatepickerLocal,
      noSearch
    }
}
</script>
<style scoped>
  #signsIoSubChart {
    height: calc(100vh - 195px);
    overflow-y: auto;
  }
  .line {
    width: 80%;
    height: 100%;
    margin: 0 auto;
  }

  #signsIoSubChart .datepicker {
    position: absolute;
    top: 21px;
    left: 240px;
  }
</style>
